<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<meta charset="utf-8">
<title>This is my title</title>
      <style>
          #big-box{
             display:block;
             border:1px solid blue;
             width:640px;
             height:410px;
             margin:auto;
}
          #header{
             padding:auto;
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
          #left{
             border:1px solid blue;
             margin-left:10px;
             width:240px;
             height:265px;
             float:left;
}
          #left1{
             border:1px solid blue;
             margin:5px;
             height:125px;;
}
          #left2{
             border:1px solid blue;
             margin:5px;
             height:125px;            
}

          #main{
             border:1px solid blue;
             margin-left:auto;
             margin-right:10px;
             height:265px;
             width:370px;
}
          #footer{

             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
      </style>
</head>
<body>
  <div id="big-box">
      <p id = "header">header header header header header header header header header header</p>
      <div id="left">
        <div id="left1">
           <p>left1 left1 left1</p>
           <p>left1 left1 left1</p>
           <p>left1 left1 left1</p>
        </div>
        <div id="left2">
           <p>left2 left2 left2</p>
           <p>left2 left2 left2</p>
           <p>left2 left2 left2</p>
        </div>
      </div>
      <div id="main">
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
      </div>

        <p id="footer">footer footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer</p>
  </div>


  
</body>
</html>